<!--
    THIS EXAMPLE WAS DOWNLOADED FROM https://echarts.apache.org/examples/zh/editor.html?c=candlestick-sh
-->
<!DOCTYPE html>
<html style="height: 100%;padding:0;margin:0">
<head>
    <meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0;padding:0;">
<div id="container" style="height:100%"></div>

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>

<script type="text/javascript">
    var dom = document.getElementById("container");
    var myChart = echarts.init(dom);
    var app = {};

    var option;


    var upColor = '#ec0000';
    var upBorderColor = '#8A0000';
    var downColor = '#00da3c';
    var downBorderColor = '#008F28';


    // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
    var data0 = splitData([["2016-06-01", 18.3, 18.19, 18.13, 18.35], ["2016-06-02", 18.2, 18.02, 17.93, 18.3], ["2016-06-03", 18.12, 18.01, 17.9, 18.13], ["2016-06-06", 18.05, 18.02, 17.97, 18.11], ["2016-06-07", 18.1, 18.02, 17.97, 18.13], ["2016-06-08", 18.01, 17.99, 17.97, 18.07], ["2016-06-13", 17.86, 17.78, 17.77, 17.94], ["2016-06-14", 17.77, 17.79, 17.7, 17.83], ["2016-06-15", 17.61, 17.74, 17.55, 17.76], ["2016-06-16", 17.67, 17.8, 17.6, 17.93], ["2016-06-17", 17.75, 17.77, 17.74, 17.99], ["2016-06-20", 17.93, 17.85, 17.75, 17.93], ["2016-06-21", 17.88, 17.78, 17.75, 17.95], ["2016-06-22", 17.8, 17.89, 17.78, 17.9], ["2016-06-23", 15.9, 15.72, 15.71, 15.9], ["2016-06-24", 15.7, 15.28, 15.08, 15.79], ["2016-06-27", 15.29, 15.31, 15.18, 15.39], ["2016-06-28", 15.27, 15.28, 15.18, 15.3], ["2016-06-29", 15.29, 15.5, 15.28, 15.54], ["2016-06-30", 15.5, 15.57, 15.44, 15.66], ["2016-07-01", 15.57, 15.92, 15.54, 15.96], ["2016-07-04", 15.86, 15.93, 15.8, 16.03], ["2016-07-05", 15.94, 15.79, 15.75, 15.95], ["2016-07-06", 15.71, 15.64, 15.61, 15.76], ["2016-07-07", 15.63, 15.57, 15.45, 15.64], ["2016-07-08", 15.55, 15.45, 15.44, 15.56], ["2016-07-11", 15.56, 15.43, 15.4, 15.57], ["2016-07-12", 15.48, 15.64, 15.45, 15.65], ["2016-07-13", 15.65, 15.79, 15.64, 15.97], ["2016-07-14", 15.77, 15.7, 15.64, 15.84], ["2016-07-15", 15.71, 15.71, 15.65, 15.75], ["2016-07-18", 15.73, 15.77, 15.66, 15.91], ["2016-07-19", 15.77, 15.73, 15.65, 15.8], ["2016-07-20", 15.7, 15.75, 15.63, 15.76], ["2016-07-21", 15.74, 15.83, 15.7, 15.87], ["2016-07-22", 15.81, 15.63, 15.58, 15.82], ["2016-07-25", 15.63, 15.69, 15.63, 15.76], ["2016-07-26", 15.69, 15.74, 15.65, 15.79], ["2016-07-27", 15.73, 15.87, 15.45, 15.88], ["2016-07-28", 15.77, 15.68, 15.65, 15.79], ["2016-07-29", 15.65, 15.7, 15.61, 15.71], ["2016-08-01", 15.68, 15.8, 15.65, 15.85], ["2016-08-02", 15.79, 15.75, 15.68, 15.85], ["2016-08-03", 15.64, 15.67, 15.62, 15.72], ["2016-08-04", 15.69, 15.59, 15.49, 15.69], ["2016-08-05", 15.6, 15.73, 15.59, 15.8], ["2016-08-08", 15.76, 15.74, 15.66, 15.76], ["2016-08-09", 15.75, 15.79, 15.71, 15.8], ["2016-08-10", 15.8, 15.83, 15.73, 15.85], ["2016-08-11", 15.75, 16.07, 15.74, 16.4], ["2016-08-12", 16.12, 16.36, 16.0, 16.39], ["2016-08-15", 16.5, 16.94, 16.45, 17.02], ["2016-08-16", 16.94, 16.7, 16.67, 16.99], ["2016-08-17", 16.72, 16.64, 16.52, 16.85], ["2016-08-18", 16.55, 16.44, 16.35, 16.77], ["2016-08-19", 16.43, 16.42, 16.36, 16.5], ["2016-08-22", 16.42, 16.41, 16.31, 16.47], ["2016-08-23", 16.41, 16.4, 16.32, 16.56], ["2016-08-24", 16.41, 16.39, 16.34, 16.51], ["2016-08-25", 16.36, 16.34, 16.2, 16.41], ["2016-08-26", 16.36, 16.34, 16.29, 16.4], ["2016-08-29", 16.31, 16.23, 16.08, 16.37], ["2016-08-30", 16.24, 16.4, 16.24, 16.49], ["2016-08-31", 16.35, 16.48, 16.32, 16.56], ["2016-09-01", 16.48, 16.41, 16.38, 16.55], ["2016-09-02", 16.38, 16.48, 16.35, 16.5], ["2016-09-05", 16.49, 16.49, 16.42, 16.58], ["2016-09-06", 16.49, 16.41, 16.37, 16.53], ["2016-09-07", 16.41, 16.48, 16.35, 16.5], ["2016-09-08", 16.47, 16.6, 16.43, 16.61], ["2016-09-09", 16.62, 16.56, 16.5, 16.66], ["2016-09-12", 16.38, 16.4, 16.26, 16.47], ["2016-09-13", 16.4, 16.45, 16.39, 16.46], ["2016-09-14", 16.43, 16.4, 16.38, 16.48], ["2016-09-19", 16.45, 16.46, 16.42, 16.51], ["2016-09-20", 16.47, 16.46, 16.42, 16.48], ["2016-09-21", 16.47, 16.45, 16.43, 16.51], ["2016-09-22", 16.49, 16.53, 16.47, 16.59], ["2016-09-23", 16.55, 16.48, 16.48, 16.55], ["2016-09-26", 16.45, 16.48, 16.41, 16.57], ["2016-09-27", 16.42, 16.48, 16.42, 16.52], ["2016-09-28", 16.48, 16.48, 16.46, 16.53], ["2016-09-29", 16.52, 16.5, 16.49, 16.55], ["2016-09-30", 16.5, 16.49, 16.48, 16.53], ["2016-10-10", 16.53, 16.55, 16.48, 16.6], ["2016-10-11", 16.57, 16.57, 16.5, 16.58], ["2016-10-12", 16.54, 16.51, 16.48, 16.54], ["2016-10-13", 16.51, 16.43, 16.42, 16.52], ["2016-10-14", 16.43, 16.46, 16.38, 16.47], ["2016-10-17", 16.41, 16.27, 16.22, 16.44], ["2016-10-18", 16.28, 16.34, 16.24, 16.39], ["2016-10-19", 16.35, 16.27, 16.24, 16.39], ["2016-10-20", 16.27, 16.29, 16.25, 16.34], ["2016-10-21", 16.29, 16.3, 16.22, 16.34], ["2016-10-24", 16.3, 16.47, 16.27, 16.58], ["2016-10-25", 16.48, 16.42, 16.36, 16.5], ["2016-10-26", 16.4, 16.32, 16.3, 16.42], ["2016-10-27", 16.3, 16.19, 16.18, 16.31], ["2016-10-28", 16.19, 16.29, 16.18, 16.34], ["2016-10-31", 16.23, 16.27, 16.01, 16.31], ["2016-11-01", 16.26, 16.3, 16.21, 16.33], ["2016-11-02", 16.21, 16.2, 16.18, 16.3], ["2016-11-03", 16.19, 16.35, 16.19, 16.38], ["2016-11-04", 16.3, 16.4, 16.29, 16.53], ["2016-11-07", 16.39, 16.42, 16.38, 16.45], ["2016-11-08", 16.45, 16.47, 16.44, 16.54], ["2016-11-09", 16.47, 16.46, 16.36, 16.53], ["2016-11-10", 16.55, 16.57, 16.48, 16.64], ["2016-11-11", 16.56, 16.59, 16.45, 16.63], ["2016-11-14", 16.53, 16.6, 16.52, 16.7], ["2016-11-15", 16.59, 16.59, 16.5, 16.61], ["2016-11-16", 16.59, 16.6, 16.54, 16.63], ["2016-11-17", 16.58, 16.6, 16.52, 16.63], ["2016-11-18", 16.59, 16.6, 16.55, 16.64], ["2016-11-21", 16.59, 16.64, 16.54, 16.73], ["2016-11-22", 16.67, 16.68, 16.63, 16.72], ["2016-11-23", 16.68, 16.93, 16.66, 17.23], ["2016-11-24", 16.93, 16.89, 16.86, 17.12], ["2016-11-25", 16.89, 17.09, 16.81, 17.1], ["2016-11-28", 17.15, 17.21, 17.15, 17.49], ["2016-11-29", 17.21, 17.26, 17.11, 17.35], ["2016-11-30", 17.28, 17.16, 17.1, 17.45], ["2016-12-01", 17.15, 17.15, 17.05, 17.27], ["2016-12-02", 17.1, 17.1, 16.8, 17.18], ["2016-12-05", 16.95, 17.3, 16.91, 17.32], ["2016-12-06", 17.28, 17.22, 17.2, 17.42], ["2016-12-07", 17.17, 17.07, 17.06, 17.2], ["2016-12-08", 17.15, 17.14, 17.04, 17.2], ["2016-12-09", 17.14, 17.34, 17.12, 17.46], ["2016-12-12", 17.34, 17.49, 17.19, 17.57], ["2016-12-13", 17.36, 17.17, 17.16, 17.44], ["2016-12-14", 17.17, 17.18, 17.12, 17.42], ["2016-12-15", 17.13, 16.7, 16.7, 17.13], ["2016-12-16", 16.7, 16.66, 16.63, 16.83], ["2016-12-19", 16.65, 16.52, 16.51, 16.7], ["2016-12-20", 16.52, 16.28, 16.12, 16.56], ["2016-12-21", 16.26, 16.32, 16.25, 16.37], ["2016-12-22", 16.32, 16.19, 16.14, 16.33], ["2016-12-23", 16.17, 16.19, 16.07, 16.22], ["2016-12-26", 16.13, 16.25, 16.01, 16.28], ["2016-12-27", 16.25, 16.14, 16.13, 16.32], ["2016-12-28", 16.14, 16.09, 16.03, 16.19], ["2016-12-29", 16.09, 16.07, 15.99, 16.15], ["2016-12-30", 16.07, 16.21, 16.04, 16.23], ["2017-01-03", 16.21, 16.3, 16.17, 16.44], ["2017-01-04", 16.29, 16.33, 16.18, 16.35], ["2017-01-05", 16.3, 16.3, 16.24, 16.38], ["2017-01-06", 16.3, 16.18, 16.13, 16.3], ["2017-01-09", 16.24, 16.2, 16.13, 16.29], ["2017-01-10", 16.18, 16.19, 16.14, 16.24], ["2017-01-11", 16.24, 16.16, 16.15, 16.24], ["2017-01-12", 16.18, 16.12, 16.11, 16.2], ["2017-01-13", 16.1, 16.27, 16.1, 16.29], ["2017-01-16", 16.23, 16.56, 16.1, 16.6], ["2017-01-17", 16.46, 16.4, 16.37, 16.54], ["2017-01-18", 16.42, 16.48, 16.36, 16.55], ["2017-01-19", 16.43, 16.54, 16.43, 16.64], ["2017-01-20", 16.58, 16.6, 16.5, 16.66], ["2017-01-23", 16.66, 16.57, 16.51, 16.69], ["2017-01-24", 16.58, 16.69, 16.58, 16.7], ["2017-01-25", 16.69, 16.69, 16.61, 16.74], ["2017-01-26", 16.69, 16.74, 16.61, 16.84], ["2017-02-03", 16.82, 16.63, 16.62, 16.85], ["2017-02-06", 16.75, 16.66, 16.66, 16.78], ["2017-02-07", 16.65, 16.67, 16.63, 16.74], ["2017-02-08", 16.63, 16.67, 16.54, 16.69], ["2017-02-09", 16.68, 16.72, 16.59, 16.77], ["2017-02-10", 16.76, 16.78, 16.7, 16.84], ["2017-02-13", 16.88, 16.85, 16.78, 16.9], ["2017-02-14", 16.87, 16.75, 16.74, 16.88], ["2017-02-15", 16.82, 16.84, 16.75, 16.93], ["2017-02-16", 16.88, 16.78, 16.76, 16.91], ["2017-02-17", 16.78, 16.64, 16.59, 16.82], ["2017-02-20", 16.62, 16.91, 16.62, 16.98], ["2017-02-21", 16.88, 16.88, 16.81, 17.08], ["2017-02-22", 16.88, 16.75, 16.73, 16.9], ["2017-02-23", 16.78, 16.69, 16.64, 16.83], ["2017-02-24", 16.67, 16.71, 16.66, 16.75], ["2017-02-27", 16.69, 16.59, 16.53, 16.72], ["2017-02-28", 16.58, 16.59, 16.53, 16.67], ["2017-03-01", 16.58, 16.56, 16.52, 16.62], ["2017-03-02", 16.62, 16.41, 16.39, 16.62], ["2017-03-03", 16.42, 16.35, 16.32, 16.43], ["2017-03-06", 16.37, 16.41, 16.35, 16.53], ["2017-03-07", 16.38, 16.43, 16.37, 16.45], ["2017-03-08", 16.4, 16.39, 16.35, 16.44], ["2017-03-09", 16.37, 16.22, 16.22, 16.4], ["2017-03-10", 16.23, 16.23, 16.17, 16.28], ["2017-03-13", 16.23, 16.34, 16.16, 16.34], ["2017-03-14", 16.34, 16.26, 16.24, 16.35], ["2017-03-15", 16.24, 16.24, 16.17, 16.28], ["2017-03-16", 16.27, 16.29, 16.25, 16.35], ["2017-03-17", 16.3, 16.2, 16.14, 16.32], ["2017-03-20", 16.24, 16.14, 16.13, 16.25], ["2017-03-21", 16.15, 16.0, 15.98, 16.16], ["2017-03-22", 15.98, 15.78, 15.7, 15.98], ["2017-03-23", 15.8, 15.88, 15.79, 15.92], ["2017-03-24", 15.85, 15.96, 15.83, 16.0], ["2017-03-27", 15.97, 16.04, 15.9, 16.13], ["2017-03-28", 16.11, 16.01, 15.97, 16.13], ["2017-03-29", 16.01, 15.87, 15.8, 16.11], ["2017-03-30", 15.88, 15.81, 15.72, 15.9], ["2017-03-31", 15.78, 16.01, 15.77, 16.05], ["2017-04-05", 16.05, 16.16, 15.89, 16.2], ["2017-04-06", 16.09, 16.1, 16.03, 16.18], ["2017-04-07", 16.06, 16.1, 16.02, 16.16], ["2017-04-10", 16.12, 15.97, 15.94, 16.12], ["2017-04-11", 15.97, 15.89, 15.81, 15.99], ["2017-04-12", 15.88, 15.89, 15.75, 15.96], ["2017-04-13", 15.88, 15.75, 15.73, 15.89], ["2017-04-14", 15.76, 15.51, 15.42, 15.78], ["2017-04-17", 15.53, 15.56, 15.3, 15.6], ["2017-04-18", 15.5, 15.3, 15.3, 15.52], ["2017-04-19", 15.25, 15.11, 15.11, 15.27], ["2017-04-20", 15.12, 14.91, 14.9, 15.14], ["2017-04-21", 14.92, 15.05, 14.85, 15.07], ["2017-04-24", 15.05, 15.0, 14.91, 15.11], ["2017-04-25", 15.02, 15.05, 14.99, 15.1], ["2017-04-26", 15.06, 15.05, 15.0, 15.11], ["2017-04-27", 15.05, 15.21, 15.03, 15.25], ["2017-04-28", 15.15, 15.21, 15.08, 15.22], ["2017-05-02", 15.21, 15.16, 15.13, 15.22], ["2017-05-03", 15.16, 15.08, 15.05, 15.16], ["2017-05-04", 15.07, 14.98, 14.9, 15.07], ["2017-05-05", 14.95, 14.92, 14.52, 14.98], ["2017-05-08", 14.78, 14.86, 14.51, 14.9]]);


    function splitData(rawData) {
        var categoryData = [];
        var values = []
        for (var i = 0; i < rawData.length; i++) {
            categoryData.push(rawData[i].splice(0, 1)[0]);
            values.push(rawData[i])
        }
        return {
            categoryData: categoryData,
            values: values
        };
    }

    function calculateMA(dayCount) {
        var result = [];
        for (var i = 0, len = data0.values.length; i < len; i++) {
            if (i < dayCount) {
                result.push('-');
                continue;
            }
            var sum = 0;
            for (var j = 0; j < dayCount; j++) {
                sum += data0.values[i - j][1];
            }
            result.push(sum / dayCount);
        }
        return result;
    }


    option = {
        backgroundColor:"#100C2A",
        textStyle:{
            color:"white"
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            }
        },
        grid: {
            left: '10%',
            right: '10%',
            bottom: '10%'
        },
        xAxis: {
            type: 'category',
            data: data0.categoryData,
            scale: true,
            boundaryGap: false,
            axisLine: {onZero: false},
            splitLine: {show: false},
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax'
        },
        yAxis: {
            scale: true,
            splitArea: {
                show: true
            }
        },
        dataZoom: [
            {
                type: 'inside',
                start: 50,
                end: 100
            }
        ],
        series: [
            {
                name: 'MA20',
                type: 'line',
                data: calculateMA(20),
                smooth: true,
                lineStyle: {
                    opacity: 0.5
                }
            }

        ]
    };

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }

</script>
</body>
</html>
